<template>
    <div id="app">
        <h1>上传文件到阿里云 OSS</h1>
        <form @submit.prevent="uploadFile">
            <input type="file" @change="handleFileChange" />
            <button type="submit" :disabled="!selectedFile">上传文件</button>
        </form>
        <div v-if="uploadStatus">
            <h3>上传结果：</h3>
            <p v-if="uploadStatus === 'success'">
                文件上传成功！<br />
                <a :href="fileUrl" target="_blank">{{ fileUrl }}</a>
            </p>
            <p v-else class="error">文件上传失败，请重试。</p>
        </div>
        <div v-if="datalist">
            <div v-if="datalist == null || Object.keys(datalist).length === 0">
                <h3>审核中，请稍候……</h3>
            </div>
            <div v-else>
                <p>姓名：{{ datalist.name }}</p>
                <p>性别：{{ datalist.sex }}</p>
                <p>出生日期：{{ datalist.birth }}</p>
                <p>民族：{{ datalist.mz }}</p>
                <p>地址：{{ datalist.address }}</p>
                <p>身份证：{{ datalist.code }}</p>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import axios from 'axios';
import { ElMessage } from 'element-plus';

// 响应式变量
const selectedFile = ref(null); // 存储用户选择的文件
const uploadStatus = ref(''); // 上传状态 ("success" 或 "error")
const fileUrl = ref(''); // 上传成功后返回的文件 URL

// 获取 CSRF Token 的函数
function getCookie(name) {
    const value = `; ${document.cookie}`;
    const parts = value.split(`; ${name}=`);
    if (parts.length === 2) return parts.pop().split(";").shift();
}
const csrfToken = getCookie('csrftoken');

// 处理文件选择
const handleFileChange = (event) => {
    selectedFile.value = event.target.files[0]; // 获取选中的文件
};
const datalist = ref([]);

// 上传文件到后端
const uploadFile = async () => {
    if (!selectedFile.value) {
        alert('请选择一个文件！');
        return;
    }

    // 构造 FormData 对象
    const formData = new FormData();
    formData.append('file', selectedFile.value);

    try {
        // 发送 POST 请求到后端
        const response = await axios.post('http://127.0.0.1:8000/user/upload/', formData, {
            headers: {
                'X-CSRFToken': csrfToken, // 添加 CSRF Token
                'Content-Type': 'multipart/form-data',
            },
        }); 

        // 处理响应数据
        if (response.data.code === 200 ) {
            uploadStatus.value = 'success';
            fileUrl.value = response.data.file_url;// 后端返回的文件 URL
            localStorage.setItem('file_url', fileUrl.value);

        } else {
            uploadStatus.value = 'error';
        }

        axios.get('http://127.0.0.1:8000/user/idcard/', { params: { 'url': fileUrl.value } })
            .then(res => {

                if (res.data.code == 200) {
                    ElMessage.success(res.data.msg);
                }

                const t = setInterval(() => {
                    axios.get('http://127.0.0.1:8000/user/baiduusermes/', { params: { 'url': fileUrl.value } }).then(res => {
                        console.log(res.data);
                        if (res.data.code == 200) {
                            console.log(res.data.mes);
                            datalist.value = res.data.mes;
                            clearInterval(t);
                        }
                    });
                }, 1000);
            });
    } catch (error) {
        console.error('文件上传失败:', error);
        uploadStatus.value = 'error';
    }
};
</script>

<style>
/* 简单样式 */
#app {
    font-family: Arial, sans-serif;
    margin: 20px;
    max-width: 400px;
}

form {
    margin-bottom: 20px;
}

button {
    margin-top: 10px;
    padding: 10px 20px;
    font-size: 16px;
}

.error {
    color: red;
}
</style>